<template>
<!-- message_logistics.wxml  -->
 <view class="container">
    <view class="logistics-wrap">
        <view class="logistics-empty" @tap="clearMessage">清空</view>
          <view v-for="(item, index) in messageList" :key="index" class="logistics_mesg">
              <view class="logistics_items">
                  <text class="logistics_time">{{item.send_time_text}}</text>
                  <view class="mesg_cont">
                        <text class="logistics_name">{{item.message_title}}<text v-if="item.is_see == 0" class="logistics_icon"></text></text>
                          <view class="logistics_span">
                              <view class="logistics_em">
                                  <view class="logistics_b">
                                    {{item.message_content}}                          
                                  </view>
                                  <view class="logistics_i" v-if="item.mmt_code == 'evaluate_logistics'">{{item.order_text}}</view>
                                             <view class="logistics_i" v-else>订单编号：{{item.order_sn}}</view>
                              </view>
                          </view>
                      <view class="logistics_a" @tap="goDetail" :data-item="item" style="background:url(../../../images/yr.png) center right no-repeat;background-size:16rpx 28rpx;">
                          查看详情
                      </view>
                  </view>   
              </view>
          </view>
    </view>
    <view class="mesg_none" v-if="!messageList || messageList.length == 0">
         <image class="mesg_none_img" src="/static/images/error-img.png"></image> 
        <text class="mesg_none_span">暂无消息记录~</text>
    </view>     
 </view>
</template>

<script>
// pages/user/message_logistics/message_logistics.js
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      messageList: null,
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    load.init(this, '', 'messageList');
    this.requestMessageList();
  },
  onShow: function () {
    this.onPullDownRefresh();
  },
  onPullDownRefresh: function () {
    this.resetData();
    this.requestMessageList();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestMessageList();
    }
  },
  methods: {
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.messageList = null;
      this.currentPage = 1;
    },
    requestMessageList: function () {
      var that = this;
      var requestUrl = that.url + '/index.php?m=Api&c=Message&a=message_notice_detail&type=2';
      requestUrl = requestUrl + '&p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++; //that.setData({ messageList: res.data.result });

        uni.stopPullDownRefresh();
      });
    },
    //删除操作
    clearMessage: function () {
      if (this.messageList == null || this.messageList.length == 0) {
        app.globalData.showTextWarining("当前无消息");
        return;
      }

      var that = this;
      uni.showModal({
        title: '确定清空全部消息！',
        cancelText: '取消',
        confirmText: '确定',
        success: function (res) {
          if (!res.confirm) {
            return;
          }

          that.deleteMsg();
        }
      });
    },
    deleteMsg: function () {
      var that = this;
      request.post('/index.php?m=Api&c=Message&a=deletedMessage&type=2', {
        success: function (res) {
          that.onPullDownRefresh();
        }
      });
    },
    goDetail: function (e) {
      var item = e.currentTarget.dataset.item;
      this.setMessageForRead(item.rec_id);

      if (4 == item.type) {
        //待评价跳转
        uni.redirectTo({
          url: '/pages/user/comment/comment'
        });
        return;
      }

      uni.navigateTo({
        url: '/pages/user/order_detail/order_detail?order_id=' + item.order_id
      });
    },
    setMessageForRead: function (recId) {
      request.post('/index.php?m=Api&c=Message&a=setMessageForRead', {
        data: {
          rec_id: recId
        },
        success: function (res) {}
      });
    }
  }
};
</script>
<style>
/* message_logistics.wxss */
.logistics_mesg{
    width:100%;
    height:auto;
  }
.logistics_mesg:last-of-type{
    padding-bottom:60rpx;
}
.logistics_items{
    width:92%;
    padding:0 4%;
    }
.logistics_time{
   display: block;
    height:66rpx; 
    line-height:66rpx;
    padding-top:18rpx;
    font-size:24rpx; 
    color:#666;
    font-weight:normal;
    text-align:center;
       }
.mesg_cont{ 
    width:94%;
    background-color:#fff; 
    border:1rpx solid #f3f3f3;
    border-radius:10rpx; 
    padding:30rpx 3% 0;
     text-align:left;
     }
.logistics_name{
    display: block;
    font-size:30rpx;
    color:#333;
    position:relative;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
     padding-right:30rpx;
     }
.logistics_icon{
    width:18rpx;
    height:18rpx; 
    background-color:#ff3939;
    border-radius:50%;
    position:absolute;
    right:6rpx; top:6rpx;
    }
.logistics_span{ 
   display:block;
   margin:24rpx 0; 
   overflow:hidden;
   }
.logistics_em{ 
    width:80%;
    font-size:24rpx;
    float:left;
    }
.logistics_b{
    color:#333;
    line-height:36rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    }
.logistics_i{ 
    display: block;
    color:#999;
    margin-top:30rpx;
   }
.logistics_img{
    width:96rpx;
    height:96rpx;
    float:right;
    }
.logistics_a{ 
    display:block;
    width:100%;
    height:66rpx;
    line-height:66rpx;
    color:#999; 
    font-size:24rpx;
    border-top:1rpx solid #f3f3f3;
    
    }
.logistics-wrap{
  position: relative
}
.logistics-empty{
    position: absolute;
    color: #666666;
    font-size: 24rpx;
    right: 30rpx;
    top: 25rpx;
    line-height: 26rpx;
    border: 1rpx solid #f3f3f3;
    border-radius:8rpx; 
    padding: 6rpx;

}
.mesg_none{ 
    width:100%; 
     position: fixed; 
    text-align:center;
    height:100vh;
    background-color:#fff;
    z-index: 9;
  }
.mesg_none_img{
    height:450rpx;
    margin-top:180rpx;
    }
.mesg_none_span{
    font-size:30rpx;
    margin-top: 30rpx;
    color:#666;
    display:block;
    }
</style>